<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <!-- 单独分离出来,方便演示-->
    <style>

        /* css中,如果有绝对定位的元素,会依赖于最近决定定位的元素的位置,如果都没有,最终会依赖到body*/
        #div1 {
            width: 200px;
            height: 200px;
            background: bisque;
            margin: 200px;              /*使父节点产生位移,方便观察子节点的依赖情况*/
            position: relative;         /*3.如果父节点开启了定位(相对定位),子节点便会依赖到父节点上,最终产生子节点在父节点中的效果*/
        }
        #div1-1 {
            width: 100px;
            height: 100px;
            background: aquamarine;
            position: absolute; /*1.子节点开启绝对位置,会依赖最近的绝对定位的元素,然而父节点没有开启定位,因此会直接依赖到body*/
            left: 20px;         /*2.最终形成与左间隔20px,与上间隔40px的位置*/
            top: 40px;

        }
    </style>

    <script>
        //也可以通过offsetParent来确定这一点
        window.onload = function () {
            let oDivC = document.getElementById('div1-1');
            console.log(oDivC.offsetParent);
            alert(oDivC.offsetParent);  // 父节点没有定位前弹出的是body [object HTMLBodyElement];
                                        // 定位后是div [object HTMLDivElement]
        };
        //总节,offsetParent与parentNode不同,前者会因为页面元素影响发生变化,而后者不会



    </script>
</head>

<body>

<div>

    <div id="div1">
        <div id="div1-1"></div>
    </div>

</div>

</body>
</html>